<template>
  <div class="community">
    <!-- 顶部搜索栏 -->
    <van-search
      show-action
      v-model="kw"
      shape="round"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <van-icon name="envelop-o" size="20"></van-icon>
      </template>
    </van-search>

    <!-- tab标签栏 -->
    <van-tabs
      v-model="active"
      title-active-color="#333"
      title-inactive-color="#999"
    >
      <van-tab title="推荐">
        <recommend></recommend>
      </van-tab>
      <van-tab title="动态">
        <dynamic></dynamic>
      </van-tab>
      <van-tab title="圈子">圈子 3</van-tab>
      <van-tab title="专区">专区 4</van-tab>
      <van-tab title="活动">
        <activity></activity>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Recommend from "@/components/community/Recommend.vue";
import Dynamic from "@/components/community/Dynamic.vue";
import Activity from "@/components/community/Activity.vue";

export default {
  components: { Recommend, Dynamic, Activity },
  data() {
    return {
      kw: "", //  用于顶部搜索栏双向数据绑定
      active: "1", // 保存tab标签栏激活项
    };
  },
};
</script>

<style lang="scss" scoped></style>
